<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{margin: 0 ;
				padding: 0;;
			}
			.zhu{
				width: 100vw;
				height: 100vh;
				display: flex;
				align-items: center;
				justify-content: center;
				border: 1px solid black;
			}
			canvas{
				border: 1px dashed blue;
				width: 500px;
				height: 500px;
			}
			
		</style>
	</head>
	<body>
		<div class="zhu">
			<canvas id="canvasone" width="500" height="500"></canvas>
			<input type="button"  id="light" value="亮" />
			<input type="number"  id="k"   />
			
		</div>
	</body>
	<script type="text/javascript">
		window.onload=function(){
			let oneCanvas=document.getElementById('canvasone');
			let ppen=oneCanvas.getContext('2d');

			var image=new Image();
			image.src='img.png';
			
			image.onload=function(){
				ppen.drawImage(image,0,0,300,300);
				
				var  ImageData=ppen.getImageData(0,0,500,500);
				var data=ImageData.data;
				document.getElementById('light').onclick=function(){
					let light=100;
					for(var i=0;i<data.length;i+=4){
						data[i+0]+=light;
						data[i+1]+=light;
						data[i+2]+=light;
					}
					ppen.putImageData(ImageData,0,0);
				}
				
				
//				document.getElementById('light').onclick=function(){
//					let light=parseFloat(document.getElementById('k').value)
//					for(var i=0;i<data.length;i+=4){
//						data[i+0]+=light;
//						data[i+1]+=light;
//						data[i+2]+=light;
//						data[i+3] *= light;
//						console.log(data[i+3]);
//					}
//					
//					ppen.putImageData(ImageData,0,0);
//				}
							
//				var imageData=ppen.createImageData(200,200);
//				var data=imageData.data;
//				
//				for(var i=0;i<data.length;i+=4){
//					data[i+0]=200;
//					data[i+1]=143;
//					data[i+2]=90;
//					data[i+3]=255;
//					
//				}
//				ppen.putImageData(imageData,0,0);
				
			}
			
			
			
		 }	
	</script>
</html>
